<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->

<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- BEGIN HEAD -->

<head>
    <base href="/hxhmanage/"/>
    <meta charset="utf-8" />

    <title>好洗欢管理平台</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport" />

    <meta content="" name="description" />

    <meta content="" name="author" />

    <!-- BEGIN GLOBAL MANDATORY STYLES -->

    <link href="css/vendor/bootstrap.min.css" rel="stylesheet" type="text/css"/>

    <link href="css/vendor/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

    <link href="css/vendor/font-awesome.min.css" rel="stylesheet" type="text/css"/>

    <link href="css/vendor/style-metro.css" rel="stylesheet" type="text/css"/>

    <link href="css/vendor/style.css" rel="stylesheet" type="text/css"/>

    <link href="css/vendor/style-responsive.css" rel="stylesheet" type="text/css"/>

    <link href="css/vendor/default.css" rel="stylesheet" type="text/css" id="style_color"/>

    <link href="css/vendor/uniform.default.css" rel="stylesheet" type="text/css"/>

    <link href="css/vendor/timeline.css" rel="stylesheet" type="text/css">

    <!-- END GLOBAL MANDATORY STYLES -->

    <!-- BEGIN PAGE LEVEL STYLES -->

    <link rel="stylesheet" type="text/css" href="css/vendor/select2_metro.css" />

    <link rel="stylesheet" href="css/vendor/DT_bootstrap.css" />



    <!--<link href="css/common/common.css" rel="stylesheet" type="text/css">-->

    <!-- END PAGE LEVEL STYLES -->

    <link rel="shortcut icon" href="images/logo.png" />

</head>
<body class="page-header-fixed page-sidebar-closed">
<!-- BEGIN HEADER -->

<div class="header navbar navbar-inverse navbar-fixed-top">

    <!-- BEGIN TOP NAVIGATION BAR -->

    <div class="navbar-inner">

        <div class="container-fluid">

            <!-- BEGIN LOGO -->

            <a class="brand" href="index.html" style="padding:0px;">

                <img src="images/logo.png" alt="logo" />

            </a>

            <!-- END LOGO -->

            <!-- BEGIN RESPONSIVE MENU TOGGLER -->

            <a href="javascript:;" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">

                <img src="images/menu-toggler.png" alt="" />

            </a>

            <!-- END RESPONSIVE MENU TOGGLER -->

            <!-- BEGIN TOP NAVIGATION MENU -->



            <!-- END TOP NAVIGATION MENU -->

        </div>

    </div>

    <!-- END TOP NAVIGATION BAR -->

</div>
<!-- BEGIN CONTAINER -->

<div  class="page-container row-fluid">

    <!-- BEGIN SIDEBAR -->

    <div class="page-sidebar nav-collapse collapse">

        <!-- BEGIN SIDEBAR MENU -->

        <ul class="page-sidebar-menu">

            <li>

                <!-- BEGIN SIDEBAR TOGGLER BUTTON -->

                <div class="sidebar-toggler hidden-phone"></div>

                <!-- BEGIN SIDEBAR TOGGLER BUTTON -->

            </li>



            <li class="active ">

                <a href="indexAction!setStrutsPage.action?pageFlag=order/ordermana.html">

                    <i class="icon-file-text"></i>

                    <span class="title">订单管理</span>

                </a>

            </li>

            <li >

                <a href="indexAction!setStrutsPage.action?pageFlag=community/communityList.html">

                    <i class="icon-home"></i>

                    <span class="title">地址管理</span>

                </a>

            </li>

            <li >

                <a href="indexAction!setStrutsPage.action?pageFlag=diser/disermana.html">

                    <i class="icon-user-md"></i>

                    <span class="title">配送人员管理</span>

                </a>

            </li>


            <li >

                <a href="indexAction!setStrutsPage.action?pageFlag=pro/product.html">

                    <i class="icon-barcode"></i>

                    <span class="title">产品管理</span>

                </a>

            </li>

        </ul>

        <!-- END SIDEBAR MENU -->

    </div>

    <!-- END SIDEBAR -->

    <!-- BEGIN PAGE -->

    <div id="orderList" class="page-content">

        <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->



        <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->

        <!-- BEGIN PAGE CONTAINER-->

        <div  class="container-fluid">

            <!-- BEGIN PAGE HEADER-->

            <div class="row-fluid">

                <div class="span12">



                </div>

            </div>

            <!-- END PAGE HEADER-->

            <!-- BEGIN PAGE CONTENT-->

            <div class="row-fluid">

                <div class="span12">

                    <!-- BEGIN EXAMPLE TABLE PORTLET-->

                    <div class="portlet box light-grey">

                        <div class="portlet-title">

                            <div class="caption"><i class="icon-globe"></i>订单管理</div>

                            <div class="tools">

                                <a href="javascript:;" class="collapse"></a>


                            </div>

                        </div>

                        <div class="portlet-body">
                            <div class="span12 booking-search">


                                    <div class="clearfix margin-bottom-10">

                                        <label>订单编号</label>

                                        <div class="input-icon left">

                                            <i class="icon-tag"></i>

                                            <input class="m-wrap span12" id="orderSeq" type="text" placeholder="Wxxxxxx ...">

                                        </div>

                                    </div>

                                    <div class="clearfix margin-bottom-20">

                                        <div class="control-group pull-left margin-right-20">

                                            <label class="control-label">开始日期:</label>

                                            <div class="controls">

                                                <div class="input-append date "  data-date-format="dd-mm-yyyy" data-date-viewmode="years">

                                                    <input class="m-wrap m-ctrl-medium date-picker" id="beginDate" size="16" type="text"><span class="add-on"><i class="icon-calendar"></i></span>

                                                </div>

                                            </div>

                                        </div>

                                        <div class="control-group pull-left">

                                            <label class="control-label">结束日期:</label>

                                            <div class="controls">

                                                <div class="input-append date "  data-date-format="mm/yyyy" data-date-viewmode="years" data-date-minviewmode="months">

                                                    <input class="m-wrap m-ctrl-medium date-picker" id="endDate" size="16" type="text"><span class="add-on"><i class="icon-calendar"></i></span>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="clearfix margin-bottom-10">

                                        <div class="pull-left margin-right-20">

                                            <label>客户手机</label>

                                            <div class="input-icon left">

                                                <i class="icon-user"></i>

                                                <input class="m-wrap" id="phone" type="text" placeholder="">

                                            </div>

                                        </div>


                                    </div>

                                <div class="clearfix margin-bottom-10">
                                    <button id="searchBtn" class="btn blue btn-block">搜索 <i class="m-icon-swapright m-icon-white"></i></button>

                                </div>

                            </div>




                            <div class="clearfix" style="margin-top: 15px;">


                                <div class="btn-group" style="font-size: 15px;">




                                    <button id="todayBtn" class="btn blue ">

                                        今天的订单 <i class="icon-ok-sign"></i>

                                    </button>


                                    <button id="weakBtn"  class="btn grey">

                                        本周的订单 <i class="icon-check-empty"></i>

                                    </button>


                                    <button id="monthBtn"  class="btn grey">

                                        本月的订单 <i class="icon-check-empty"></i>

                                    </button>

                                    <button id="allBtn" class="btn grey">

                                        所有订单 <i class="icon-check-empty"></i>

                                    </button>


                                    <button id="freshBtn" class="btn grey">

                                        刷新 <i class="icon-check-empty"></i>

                                    </button>

                                </div>

                            <table class="table table-striped table-bordered table-hover margin-top-10 list-p2"  id="sample_1">

                                <thead>

                                <tr>

                                    <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#sample_1 div span .checkboxes" /></th>

                                    <th style="width:80px;">订单编号</th>

                                    <th style="width:80px;">客户手机</th>

                                    <th style="width:80px;">配送地址</th>

                                    <th style="width:80px;">下单时间</th>
                                    <th style="width:80px;">订单状态</th>
                                    <th style="width:80px;">管理备注</th>
                                    <th style="width:80px;">订单备注</th>



                                    <th style="width:40px;">语音</th>
                                    <th style="width:100px;">操作</th>
                                    <!--<th ></th>-->

                                </tr>

                                </thead>

                            </table>
                                </div>

                        </div>

                    </div>

                    <!-- END EXAMPLE TABLE PORTLET-->

                </div>

            </div>



            <!-- END PAGE CONTENT-->

        </div>

        <!-- END PAGE CONTAINER-->

    </div>



    <div id="orderDetailContain" class="page-content" style="display:none;min-height:1071px !important">

        <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->



        <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->

        <!-- BEGIN PAGE CONTAINER-->

        <div class="container-fluid">

            <!-- BEGIN PAGE HEADER-->

            <div class="row-fluid hidden-print">

                <div class="span12">

                    <!-- BEGIN STYLE CUSTOMIZER -->



                    <!-- END BEGIN STYLE CUSTOMIZER -->

                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->

                    <h3 class="page-title">

                        订单编号 <small id="lable_orderSeq"></small>

                    </h3>



                    <!-- END PAGE TITLE & BREADCRUMB-->

                </div>

            </div>

            <!-- END PAGE HEADER-->

            <!-- BEGIN PAGE CONTENT-->

            <div class="row-fluid invoice">

                <div class="row-fluid invoice-logo">

                    <div class="span6 invoice-logo-space"></div>

                    <div class="span6">



                    </div>

                </div>

                <hr>

                <div class="row-fluid">

                    <div class="span3">

                        <h4>客户信息:</h4>

                        <ul class="unstyled">

                            <li id="custName_lab"></li>

                            <li id="custPhone_lab"></li>

                            <li id="custAdd_lab"></li>


                        </ul>

                    </div>

                    <div class="span2">

                        <h4>订单信息:</h4>

                        <ul class="unstyled">

                            <li id="orderDate_lab"></li>

                            <li id="orderBaseInfo_lab"></li>



                        </ul>

                    </div>

                    <div class="span6 invoice-payment">

                        <h4>订单状态:</h4>

                        <ul class="timeline" id="orderStatusUL">



                        </ul>

                    </div>

                </div>

                <div class="row-fluid">

                    <table  class="table table-striped table-hover">

                        <thead>

                        <tr>

                            <th>#</th>

                            <th>产品名称</th>

                            <th class="hidden-480">产品类别</th>

                            <th class="hidden-480">数量</th>

                            <th class="hidden-480">单价</th>

                            <th>总价</th>

                        </tr>

                        </thead>

                        <tbody id="proTab">



                        </tbody>

                    </table>

                </div>

                <div class="row-fluid">



                    <div class="span8 invoice-block">



                        <a class="btn blue big hidden-print" href="javascript:void(0);" id="orderDescBackBtn">返回 <i class="icon-chevron-left icon-big"></i></a>



                    </div>

                </div>

            </div>

            <!-- END PAGE CONTENT-->

        </div>

        <!-- END PAGE CONTAINER-->

    </div>

    <!-- END PAGE -->

</div>





<!-- BEGIN FOOTER -->

<div class="footer">

    <div class="footer-inner">



    </div>

    <div class="footer-tools">

			<span class="go-top">

			<i class="icon-angle-up"></i>

			</span>

    </div>

</div>


<audio id="soundPlay" src="" style="display: none;" controls="controls">

</audio>

<!-- END FOOTER -->

<!-- END CONTAINER -->


<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->

<!-- BEGIN CORE PLUGINS -->

<script src="js/vendor/jquery-1.10.1.min.js" type="text/javascript"></script>

<script src="js/vendor/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->

<script src="js/vendor/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>

<script src="js/vendor/bootstrap.min.js" type="text/javascript"></script>

<!--[if lt IE 9]>

<script src="js/vendor/excanvas.min.js"></script>

<script src="js/vendor/respond.min.js"></script>

<![endif]-->

<script src="js/vendor/jquery.slimscroll.min.js" type="text/javascript"></script>

<script src="js/vendor/jquery.blockui.min.js" type="text/javascript"></script>

<script src="js/vendor/jquery.cookie.min.js" type="text/javascript"></script>

<script src="js/vendor/jquery.uniform.min.js" type="text/javascript" ></script>

<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL PLUGINS -->

<script type="text/javascript" src="js/vendor/select2.min.js"></script>

<script type="text/javascript" src="js/vendor/jquery.dataTables.js"></script>

<script type="text/javascript" src="js/vendor/bootstrap-datepicker.js"></script>


<script type="text/javascript" src="js/vendor/DT_bootstrap.js"></script>
<script type="text/javascript" src="js/vendor/fnReloadAjax.js"></script>


<!-- END PAGE LEVEL PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->

<script src="js/vendor/app.js"></script>
<script type="text/javascript" src="js/common/common.js"></script>
<script src="order/js/order.js"></script>

<script>

    jQuery(document).ready(function() {

        App.init();

        TableManaged.init(1);

        $("#allBtn").on("click",function(){
            $(this).find("i").addClass("icon-ok-sign");
            $(this).find("i").removeClass("icon-check-empty");



            $(this).addClass("blue");


            $(this).siblings().each(function(i,o){
                $(this).removeClass("blue");
                $(o).find("i").removeClass("icon-ok-sign");
                $(o).find("i").addClass("icon-check-empty");

            })

            TableManaged.init();
        });
        $("#todayBtn").on("click",function(){
            $(this).find("i").addClass("icon-ok-sign");
            $(this).find("i").removeClass("icon-check-empty");



            $(this).addClass("blue");


            $(this).siblings().each(function(i,o){
                $(this).removeClass("blue");
                $(o).find("i").removeClass("icon-ok-sign");
                $(o).find("i").addClass("icon-check-empty");

            })

            TableManaged.init(1);
        });
        $("#weakBtn").on("click",function(){

            $(this).find("i").addClass("icon-ok-sign");
            $(this).find("i").removeClass("icon-check-empty");


            $(this).addClass("blue");


            $(this).siblings().each(function(i,o){
                $(this).removeClass("blue");
                $(o).find("i").removeClass("icon-ok-sign");
                $(o).find("i").addClass("icon-check-empty");

            })

            TableManaged.init(2);
        });
        $("#monthBtn").on("click",function(){
            $(this).find("i").addClass("icon-ok-sign");
            $(this).find("i").removeClass("icon-check-empty");




            $(this).addClass("blue");


            $(this).siblings().each(function(i,o){
                $(this).removeClass("blue");
                $(o).find("i").removeClass("icon-ok-sign");
                $(o).find("i").addClass("icon-check-empty");

            })
            TableManaged.init(3);
        });
        $("#freshBtn").on("click",function(){


            $(this).find("i").addClass("icon-ok-sign");
            $(this).find("i").removeClass("icon-check-empty");



            $(this).addClass("blue");


            $(this).siblings().each(function(i,o){
                $(this).removeClass("blue");
                $(o).find("i").removeClass("icon-ok-sign");
                $(o).find("i").addClass("icon-check-empty");

            })


            TableManaged._table.fnReloadAjax();
        });



        $("#searchBtn").on("click",function() {
            TableManaged.init(4);
        });
        $("#orderDescBackBtn").on("click",function() {
            $("#orderList").toggle();
            $("#orderDetailContain").toggle();
        });



    });

</script>
</body>
</html>